<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import PageHeader from '@/components/common/PageHeader.vue';

const router = useRouter();
const phone = ref('');
const code = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
const counting = ref(0);

const validateConfirmPassword = () => {
    return newPassword.value === confirmPassword.value;
};

const sendCode = async () => {
    if (!phone.value) {
        showToast('请输入手机号');
        return;
    }
    
    try {
        // TODO: 实现发送验证码逻辑
        counting.value = 60;
        const timer = setInterval(() => {
            counting.value--;
            if (counting.value <= 0) {
                clearInterval(timer);
            }
        }, 1000);
    } catch (error) {
        console.error('发送验证码失败:', error);
    }
};

const onSubmit = async () => {
    try {
        // TODO: 实现重置密码逻辑
        showToast('密码重置成功');
        router.push('/login');
    } catch (error) {
        console.error('重置密码失败:', error);
    }
};
</script>

<template>
    <div class="forgot-password-page">
        <page-header title="忘记密码" />
        
        <div class="forgot-password-content">
            <van-form @submit="onSubmit">
                <van-field
                    v-model="phone"
                    name="phone"
                    label="手机号"
                    placeholder="请输入手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]"
                />
                <van-field
                    v-model="code"
                    name="code"
                    label="验证码"
                    placeholder="请输入验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]"
                >
                    <template #button>
                        <van-button size="small" type="primary" @click="sendCode" :disabled="counting > 0">
                            {{ counting > 0 ? `${counting}s后重试` : '获取验证码' }}
                        </van-button>
                    </template>
                </van-field>
                <van-field
                    v-model="newPassword"
                    type="password"
                    name="newPassword"
                    label="新密码"
                    placeholder="请输入新密码"
                    :rules="[{ required: true, message: '请填写新密码' }]"
                />
                <van-field
                    v-model="confirmPassword"
                    type="password"
                    name="confirmPassword"
                    label="确认密码"
                    placeholder="请再次输入新密码"
                    :rules="[
                        { required: true, message: '请确认密码' },
                        { validator: validateConfirmPassword, message: '两次输入的密码不一致' }
                    ]"
                />
            </van-form>

            <div class="action-buttons">
                <van-button type="primary" block @click="onSubmit">重置密码</van-button>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.forgot-password-page {
    min-height: 100vh;
    background: #fff;
    padding-top: 44px; // 为固定定位的header预留空间
    
    .forgot-password-content {
        padding: 20px;
        
        .action-buttons {
            margin-top: 24px;
        }
    }
}
</style>